<template>
	<div class="error w944">
		<div class="error-main">
			<div class="err-img"><img :src="errorMap[errorCode] && errorMap[errorCode].img || '请求失败'" /></div>
			<div class="err-reason">{{ errorMap[errorCode] && errorMap[errorCode].message || '请求失败'}}</div>
			<div class="tips">
				<a class="click-page" @click="toHome">返回首页</a>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		created() {},
		data() {
			return {
				errorCode: this.$route.params.code,
				errorMap: {
					403: {
						img: require('../../assets/qudaoImg/403.png'),
						message: '抱歉，您无权访问该页面'
					},
					404: {
						img: require('../../assets/qudaoImg/404.png'),
						message: '抱歉，您访问的页面不见了'
					},
					500: {
						img: require('../../assets/qudaoImg/500.png'),
						message: '抱歉，服务器出错了'
					},
					503: {
						message: '503'
					}
				}
			}
		},
		methods: {
			toHome() {
				this.$router.push({
					path: '/home'
				});
			},
			back() {
				this.$router.go(-1);
			}
		},
		components: {}
	};
</script>
<style lang="scss" scoped>
	.error {position:fixed;top:0;bottom:0;left:0;right:0;background:#fff;}
	.error-main {width:500px;height:422px;text-align:center;position: fixed;top: 50%;left: 50%;margin-top: -211px;margin-left: -250px;z-index: 999;}
	.err-img{height: 303px;}
	.err-reason {font-size: 16px;color:#999;text-align: center;}
	.tips {width:120px;height:40px;line-height:40px;text-align:center;font-size:14px;color:#fff;background: #44CEF6;display: block;margin: 60px auto 0;border-radius: 5px;}
	.click-page {color:#fff;font-weight:600;}
	.click-page:hover {cursor:pointer;}
</style>